<template>
  <view class="container">
    <u-navbar title="人才详情" height="50"></u-navbar>
    <u-gap height="20" bg-color="#F0F1F2"></u-gap>
    <view class="card">
      <view class="box-left dis-flex flex-y-between flex-y-center">
        <view class="user-info">
          <view class="user-name">
            <text class="name">用户昵称</text>
            <text class="status"> (已离职-随时到岗)</text>
          </view>
          <view class="user-des">
            <text class="eq">13年</text>
            <text class="eq">36岁</text>
            <text class="eq">本科</text>
          </view>
        </view>
        <view style="position: relative">
          <u-avatar
            class="avatar"
            style="align-self: center"
            src="../../static/img/xt.png"
            size="90"
          ></u-avatar>
          <u-icon v-if="item.gender == 1" class="gender" name="/static/ns1.png" size="28"></u-icon>
          <u-icon v-else class="gender" name="/static/ns2.png" size="28"></u-icon>
        </view>
      </view>
      <view class="zhuanye dis-flex">
        <view class="label dis-flex flex-y-between">
          <text>专 </text>
          <text>业：</text>
        </view>
        <view class="value">计算机应用技术</view>
      </view>
      <view class="zhuanye dis-flex">
        <view class="label">意向区域：</view>
        <text class="value">贵州贵阳</text>
      </view>
      <view class="zhuanye dis-flex">
        <view class="label">求职意向：</view>
        <view class="value">前端开发工程师</view>
        <view style="margin: 0 20rpx; color: #999999">|</view>
        <view class="value">期望薪资：8-10K/月</view>
      </view>
    </view>
    <u-gap height="20" bg-color="#F0F1F2"></u-gap>
    <view class="card">
      <view class="card-tl">工作经历</view>
      <view class="gs-list">
        <view class="gs-item" v-for="(company, i) in item.companys" :key="i">
          <view class="dis-flex flex-y-between flex-y-center">
            <text class="com-title">花果园科技有限公司</text>
            <text class="com-date">2000.01-2006.08</text>
          </view>
          <view class="zw">前端开发</view>
          <view class="content">
            1、负责数字化营销产品的核心业务应用设计与开发、核 心架构看护与代码维护；
            2、负责数字化营销产品相关应用的技术架构设计，准确
            把握业务需求，进行系统技术方案设计等工作；
            3、攻克各种高并发、数据隔离、系统解耦等方面的技术 难关；
          </view>
        </view>
      </view>
    </view>
    <u-gap height="20" bg-color="#F0F1F2"></u-gap>
    <view class="card">
      <view class="card-tl">个人优势</view>
      <view class="content">
        1、负责数字化营销产品的核心业务应用设计与开发、核 心架构看护与代码维护；
        2、负责数字化营销产品相关应用的技术架构设计，准确 把握业务需求，进行系统技术方案设计等工作；
        3、攻克各种高并发、数据隔离、系统解耦等方面的技术 难关；
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      item: {
        gender: 1,
        companys: [{}, {}]
      }
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f0f1f2;
}

.card {
  background: #ffffff;
  padding: 30rpx 20rpx;
}

.box-left {
  position: relative;
  margin-bottom: 20rpx;
  .gender {
    position: absolute;
    left: 53rpx;
    bottom: -10rpx;
  }

  .user-info {
    height: 90rpx;
    padding: 2rpx 0;
    display: flex;
    justify-content: space-between;
    flex-flow: column;

    .user-name {
      margin-bottom: 10rpx;
      .name {
        font-weight: 600;
        font-size: 34rpx;
        color: #333333;
      }
      .status {
        color: #999999;
        font-size: 24rpx;
      }
    }

    .user-des {
      font-size: 24rpx;
      color: #999999;

      .eq {
        margin-right: 12rpx;
        padding-right: 16rpx;
        border-right: 1rpx solid #999999;
      }

      .eq:last-child {
        border: none;
      }
    }
  }
}
.zhuanye {
  font-size: 26rpx;
  color: #666666;
  margin-bottom: 12rpx;
  .label {
    width: 130rpx;
  }
}
.card-tl {
  font-weight: 600;
  font-size: 34rpx;
  color: #333333;
  margin-bottom: 20rpx;
}
.gs-item {
  margin-bottom: 30rpx;
  .com-title {
    font-weight: 600;
    font-size: 30rpx;
    color: #333333;
    margin-bottom: 20rpx;
  }
  .com-date {
    font-size: 24rpx;
    color: #333333;
  }
  .zw {
    font-size: 28rpx;
    color: #666666;
    margin-bottom: 6rpx;
  }
}
.content {
  font-size: 28rpx;
  color: #666666;
}
</style>
